<template>
  <div class="page-container">
    <el-form label-position="top" class="custom-form">
      <el-form-item label="选择根目录" class="form-item-group">
        <el-input
          v-model="formData.rootDirectory"
          placeholder="请选择要压缩的根目录"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              @click="selectRootDirectoryFn"
              class="browse-btn"
            >
              浏览
            </el-button>
          </template>
        </el-input>
        <div class="current-directory" v-if="formData.rootDirectory">
          <strong>当前选择:</strong> {{ formData.rootDirectory }}
        </div>
      </el-form-item>

      <el-form-item class="progress-section" v-if="isCompressing">
        <div class="progress-label">处理进度</div>
        <el-progress
          :percentage="progress"
          status="success"
          :text-inside="true"
          :stroke-width="18"
          class="custom-progress"
        ></el-progress>
        <p>{{ currentDirectory }}</p>
      </el-form-item>

      <el-form-item v-if="statusMessage" class="status-section">
        <el-alert
          :title="statusMessage"
          :type="statusType"
          show-icon
          class="status-alert"
        ></el-alert>
      </el-form-item>

      <el-form-item class="button-section">
        <el-button
          type="primary"
          @click="startCompressionFn"
          :disabled="!formData.rootDirectory || isCompressing"
          class="primary-btn"
        >
          开始压缩
        </el-button>
        <el-button
          @click="clearFormFn"
          :disabled="isCompressing"
          class="secondary-btn"
        >
          清空
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';

// 表单数据
const formData = reactive({
  rootDirectory: ''
});

// 状态数据
const isCompressing = ref(false);
const progress = ref(0);
const currentDirectory = ref('');
const statusMessage = ref('');
const statusType = ref('success');

// 选择根目录
const selectRootDirectoryFn = async () => {
  try {
    const result = await window.electronAPI.openDirectoryDialog();
    if (result.canceled) return;
    formData.rootDirectory = result.filePaths[0];
  } catch (error) {
    console.error('选择目录失败:', error);
    ElMessage.error('选择目录失败: ' + error.message);
  }
};

// 开始压缩
const startCompressionFn = async () => {
  if (!formData.rootDirectory) {
    ElMessage.warning('请先选择要压缩的根目录');
    return;
  }

  isCompressing.value = true;
  progress.value = 0;
  currentDirectory.value = '';
  statusMessage.value = '';

  try {
    // 执行压缩操作
    const result = await window.electronAPI.compressZip({
      rootDirectory: formData.rootDirectory
    });

    if (result.success) {
      statusType.value = 'success';
      statusMessage.value = '所有子目录已成功压缩';
      ElMessage.success('所有子目录已成功压缩');
    } else {
      statusType.value = 'error';
      statusMessage.value = result.message;
      ElMessage.error(result.message);
    }
  } catch (error) {
    console.error('压缩目录失败:', error);
    statusType.value = 'error';
    statusMessage.value = error.message || '压缩目录失败';
    ElMessage.error(error.message || '压缩目录失败');
  } finally {
    isCompressing.value = false;
  }
};

// 清空表单
const clearFormFn = () => {
  formData.rootDirectory = '';
  progress.value = 0;
  currentDirectory.value = '';
  statusMessage.value = '';
};

// 监听进度更新
const progressUpdateFn = data => {
  if (data.type === 'compress-zip') {
    progress.value = data.progress;
    currentDirectory.value = data.message;
  }
};

// 生命周期钩子
onMounted(() => {
  window.electronAPI.onProgressUpdate(progressUpdateFn);
});

onUnmounted(() => {
  window.electronAPI.removeProgressListener();
});
</script>

<style scoped>
.current-directory {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
</style>
